<template>
  <div id="Content-page">
    <div class="content-main order-desk-main">
      <!-- 左边购物车 -->
      <div class="shopping-cart">
        <div class="diners-numbe">
          <el-input v-model="diningPartySize" placeholder="输入用餐人数" type="number"></el-input>
          <el-input v-model="tableNumber" placeholder="输入桌号" type="number"></el-input>
        </div>
        <!-- 提示 -->
        <span class="order-hint" v-if="getPendingOrderData.paymentPrice <= 0"
          >选择右边的商品开始点餐吧</span
        >
        <!-- 购物车的商品 -->
        <div class="shopping-cart-height" v-if="getPendingOrderData.paymentPrice > 0">
          <div
            class="shopping-cart-goods"
            v-for="(item, index) in getPendingOrderData.productItems"
            :key="index"
          >
            <div class="goods-name-item">
              <span class="overflow-text">{{ item.goods_name }}</span>
              <span>{{ item.attribute }}</span>
            </div>
            <div>¥{{ item.display_price }}</div>
            <div class="add-subtract">
              <div>
                <img src="@/assets/jian.png" alt="" @click="addSingleProduct(index, '001')" />
              </div>
              <span>{{ item.quantity }}</span>
              <div>
                <img src="@/assets/jia.png" alt="" @click="addSingleProduct(index, '002')" />
              </div>
            </div>
          </div>
        </div>
        <!-- 确定下单 -->
        <div style="height: 70px"></div>
        <div class="checkout-cart" v-if="getPendingOrderData.paymentPrice > 0">
          <span>合计：¥{{ getPendingOrderData.paymentPrice }}</span>
          <el-button id="new-button" @click="confirmOrder">确认下单</el-button>
        </div>
      </div>
      <!-- 选择商品加入购物车 -->
      <SelectProduct></SelectProduct>
    </div>
    <!-- 支付方式弹窗 -->
    <el-dialog
      v-model="paymentModal"
      title="选择支付方式"
      width="500"
      :close-on-click-modal="false"
    >
      <div class="select-panyment">
        <div
          v-for="(item, index) in paymentMethodsData"
          :key="index"
          :class="{ selectActive: index === selectActiveIndex }"
          @click="selectPanyment(index)"
        >
          <img :src="item.icon" alt="" />
          <span>{{ item.title }}</span>
        </div>
      </div>
      <el-button id="new-button" class="confirm-payment" @click="confirmPayment" :loading="loadIng"
        >确定付款</el-button
      >
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref,computed } from "vue";
import SelectProduct from "./components/select-product.vue";
import { pendingOrders } from "@/store/index";
import {paymentMethodApi} from "@/api/other"
import { nullCheck } from "@/api/form-check";
import { createOrderApi } from "@/api/api";
const diningPartySize = ref("");
const orderStore = pendingOrders();
// 显示或隐藏支付弹窗
const paymentModal = ref(false);
// 获取购物车里待下单的商品数据
const getPendingOrderData = computed(() => {
  orderStore.removeEmptyArrays();
  return {
    paymentPrice: orderStore.paymentPrice,
    productItems: orderStore.data,
  };
});
const paymentMethodsData = paymentMethodApi('001') as {icon:string;title:string;paymentName:string}[]
const tableNumber = ref("");
//加减数量
function addSingleProduct(index: number, type: string) {
  if (type === "001") {
    // 减
    orderStore.$patch((item) => {
      item.data[index].quantity--;
      item.data[index].totalPrice = item.data[index].display_price * item.data[index].quantity;
    });
  } else {
    orderStore.$patch((item) => {
      item.data[index].quantity++;
      item.data[index].totalPrice = item.data[index].display_price * item.data[index].quantity;
    });
  }
}
const selectActiveIndex = ref(0)
function selectPanyment(index: number) {
  selectActiveIndex.value = index;
}
// 确定下单，弹出弹窗
function confirmOrder() {
  nullCheck(diningPartySize.value, "请输入用餐人数");
  nullCheck(tableNumber.value, "请输入桌号");
  paymentModal.value = true;
}
// 确定付款
const loadIng = ref(false);
async function confirmPayment() {
  loadIng.value = true;
  try {
    await createOrderApi({
      diningPartySize: diningPartySize.value,
      tableNumber: tableNumber.value,
      paymentMethod: paymentMethodApi("002", selectActiveIndex.value) as string,
      productOrder: orderStore.data,
    });
    loadIng.value = false;
    paymentModal.value = false;
    diningPartySize.value = "";
    tableNumber.value = "";
    selectActiveIndex.value = 0;
    orderStore.data = [];
  } catch (error) {
    loadIng.value = false;
  }
}
</script>

<style scoped>
.order-desk-main {
  display: flex;
}
.shopping-cart {
  width: 500px;
  background-color: ghostwhite;
  border-radius: 10px;
  position: relative;
}
.diners-numbe {
  display: flex;
  align-items: center;
}
.diners-numbe >>> .el-input__wrapper {
  box-shadow: none;
  background: none;
}
.order-hint {
  text-align: center;
  display: block;
  line-height: 600px;
  color: darkgray;
}
.shopping-cart-height {
  height: 600px;
  overflow-y: auto;
}
.shopping-cart-goods {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 10px;
}
.goods-name-item {
  width: 150px;
}
.goods-name-item span {
  display: block;
}
.goods-name-item span:nth-child(2) {
  font-size: 15px;
  color: #6666;
}
.add-subtract {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100px;
}
.add-subtract div,
img {
  width: 25px;
  height: 25px;
  cursor: pointer;
}
.checkout-cart {
  background-color: bisque;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.checkout-cart span {
  font-size: 20px;
  font-weight: bold;
}
.checkout-cart >>> .el-button--success {
  width: 100px;
  padding: 18px;
}
.select-panyment {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.select-panyment img {
  width: 40px;
  height: 40px;
  margin-bottom: 7px;
}
.select-panyment div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 20px;
  border-radius: 5px;
  cursor: pointer;
}
.select-panyment span {
  font-size: 15px;
}
.confirm-payment {
  width: 100%;
  padding: 17px 0;
  margin-top: 40px;
}
.selectActive {
  background-color: rgba(103, 194, 58, 0.6);
  color: #fff;
}
</style>
